<script lang="ts" setup>
import { reactive, ref, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { grantBusResourceData, queryBusResourceData } from '/@/api/businessResource';

const treeRef = ref()

const props = defineProps({
  data: {
    type: Array
  }
})

interface Tree {
  dataId: string
  dataName: string
  dataList?: Tree[]
}

const treeProps = {
  label: 'dataName',
}
const filterText = ref('')

watch(filterText, (val) => {
  treeRef.value!.filter(val)
})

const state = reactive({
  loading: false,
});

const currentResource = reactive({
  name: '',
  id: ''
})

const emit = defineEmits(['clear'])
const searchFormActions = {
  clearResourceSelect() {
    currentResource.name = '';
    currentResource.id = '';
    emit('clear')
  },
};

const dataActions = {
  async getSelected() {
    if (currentResource.id == '') return
    state.loading = true;
    let { data } = await queryBusResourceData({ resourceId: currentResource.id });
    state.loading = false;
    treeRef.value!.setCheckedKeys(data)
  },
  save() {
    grantBusResourceData({
      resourceId: currentResource.id,
      dataList: treeRef.value!.getCheckedKeys(true)
    }).then(() => {
      ElMessage.success('保存成功！')
      dataActions.getSelected()
    })
  }
};

const filterNode = (value: string, data: Tree) => {
  if (!value) return true
  return data.dataName.includes(value)
}

const changeResource = (data:any) => {
  currentResource.id = data.id
  currentResource.name = data.name
  dataActions.getSelected()
}

defineExpose({ changeResource })
</script>

<template>
  <div class="resource-wrapper">
    <div class="title">
      <div>业务数据</div>
      <el-tag type="success" :closable="currentResource.name != ''" @close="searchFormActions.clearResourceSelect">
        {{ currentResource.name != '' ? currentResource.name : '未选择' }}
      </el-tag>
    </div>
    <el-input
      v-model="filterText"
      placeholder="输入关键词过滤"
      style="margin-bottom: 20px;"
    />
    <el-tree
      ref="treeRef"
      :props="treeProps"
      :data="currentResource.name == '' ? [] : data"
      show-checkbox
      node-key="dataId"
      v-loading="state.loading"
      :filter-node-method="filterNode"
      :expand-on-click-node="false"
      class="tree"
    />
    <div class="bottom">
      <el-button v-if="currentResource.name != ''"  type="primary" @click="dataActions.save">保存</el-button>
    </div>
  </div>
</template>

<style lang="less" scoped>
.resource-wrapper {
  background: #fff;
  width: calc(30% - 20px);
  // height: 100%;
  padding: 15px;
  margin-left: 20px;
  position: relative;
  .bottom {
    height: 30px;
    margin-top: 20px;
    // position: absolute;
    // bottom: 15px;
    // right: 15px;
    display: flex;
    justify-content: flex-end;
  }
}
.title {
  font-size: 18px;
  border-bottom: 1px solid #d9d9d9;
  padding-bottom: 15px;
  margin-bottom: 15px;
  color: #262626;
  display: flex;
  > div {
    margin-right: 10px;
  }
}
.tree {
  height: 600px;
  overflow: auto;
}
:deep(.el-tree-node__content) {
  height: 26px;
}
</style>